<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <meta name="author" content="linzhifeng@baidu.com">

    <script src="../asset/js/esl/esl.js"></script>
    <script src="../asset/js/codemirror.js"></script>
    <script src="../asset/js/javascript.js"></script>

    <link href="../asset/css/bootstrap.css" rel="stylesheet">
    <link href="../asset/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="../asset/css/codemirror.css" rel="stylesheet">
    <link href="../asset/css/monokai.css" rel="stylesheet">
    <link href="../asset/css/echartsHome.css" rel="stylesheet">
    <link rel="shortcut icon" href="../asset/ico/favicon.png">
</head>

<body>
    <!-- NAVBAR
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="../../index.html">ECharts</a>
          <div class="nav-collapse collapse">
              <a id="forkme_banner" href="https://github.com/ecomfe/echarts">View on GitHub</a>
              <ul class="nav">
                <li><a href="../../index.html"><i class="icon-home icon-white"></i> Home</a></li>
                <li class="active"><a href="../example.html" class="active">Example</a></li>
                <li><a href="../doc.html" >API &amp; Doc</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a id="last-release-link" href=""> </a></li>
                    <li><a href="https://github.com/ecomfe/echarts/archive/master.zip">ZIP (Latest)</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>
                    <li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li><a href="http://ecomfe.github.io/zrender/index.html" target="_blank">ZRender</a></li>
                    
                  </ul>
                </li>
              </ul>
           </div><!--/.nav-collapse -->
        </div><!-- /.container -->
      </div><!-- /.navbar-inner -->
    </div><!-- /.navbar-wrapper -->

    <div class="container-fluid">
        <div class="row-fluid">
            <div id="sidebar-code" class="span4">
                <div class="well sidebar-nav">
                    <div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" id ="icon-resize" ></a>option</div>
                    <textarea id="code" name="code">
option = {
    tooltip : {
        trigger: 'axis',
        formatter: function(params) {
            var res = params[0][1];
            res += '<br/>' + params[0][0];
            res += '<br/>  开盘 : ' + params[0][2][0] + '  最高 : ' + params[0][2][3];
            res += '<br/>  收盘 : ' + params[0][2][1] + '  最低 : ' + params[0][2][2];
            res += '<br/>' + params[1][0];
            res += ' : ' + params[1][2];
            return res;
        }
    },
    legend: {
        data:['上证指数','成交金额(万)']
    },
    toolbox: {
        show : true,
        feature : {
            mark : true,
            dataZoom : true,
            dataView : {readOnly: false},
            restore : true,
            saveAsImage : true
        }
    },
    dataZoom : {
        show : true,
        realtime: true,
        start : 0,
        end : 50
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : true,
            data : [
                '2013/6/13', '2013/6/7', '2013/6/6', '2013/6/5', 
                '2013/6/4', '2013/6/3', '2013/5/31', '2013/5/30', '2013/5/29', 
                '2013/5/28', '2013/5/27', '2013/5/24', '2013/5/23', '2013/5/22',
                '2013/5/21', '2013/5/20', '2013/5/17', '2013/5/16', '2013/5/15',
                '2013/5/14', '2013/5/13', '2013/5/10', '2013/5/9', '2013/5/8',
                '2013/5/7', '2013/5/6', '2013/5/3', '2013/5/2', '2013/4/26',
                '2013/4/25', '2013/4/24', '2013/4/23', '2013/4/22', '2013/4/19',
                '2013/4/18', '2013/4/17', '2013/4/16', '2013/4/15', '2013/4/12',
                '2013/4/11', '2013/4/10', '2013/4/9', '2013/4/8', '2013/4/3', 
                '2013/4/2', '2013/4/1', '2013/3/29', '2013/3/28', '2013/3/27', 
                '2013/3/26', '2013/3/25', '2013/3/22', '2013/3/21', '2013/3/20',
                '2013/3/19', '2013/3/18', '2013/3/15', '2013/3/14', '2013/3/13',
                '2013/3/12', '2013/3/11', '2013/3/8', '2013/3/7', '2013/3/6', 
                '2013/3/5', '2013/3/4', '2013/3/1', '2013/2/28', '2013/2/27', 
                '2013/2/26', '2013/2/25', '2013/2/22', '2013/2/21', '2013/2/20',
                '2013/2/19', '2013/2/18', '2013/2/8', '2013/2/7', '2013/2/6', 
                '2013/2/5', '2013/2/4', '2013/2/1', '2013/1/31', '2013/1/30', 
                '2013/1/29', '2013/1/28', '2013/1/25', '2013/1/24'
            ]
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale:true,
            precision: 2,
            splitNumber: 9,
            boundaryGap: [0.05, 0.05],
            splitArea : {show : true}
        },
        {
            type : 'value',
            scale:true,
            splitNumber: 9,
            boundaryGap: [0.05, 0.05],
            splitArea : {show : true}
        }
    ],
    series : [
        {
            name:'上证指数',
            type:'k',
            itemStyle: {
                normal: {
                    color: 'red',           // 阳线填充颜色
                    color0: 'lightgreen',   // 阴线填充颜色
                    lineStyle: {
                        width: 2,
                        color: 'orange',    // 阳线边框颜色
                        color0: 'green'     // 阴线边框颜色
                    }
                },
                emphasis: {
                    color: 'black',         // 阳线填充颜色
                    color0: 'white'         // 阴线填充颜色
                }
            },
            data:[ // 开盘，收盘，最低，最高
                {
                    value:[2190.1, 2148.35, 2126.22, 2190.1],
                    itemStyle: {
                        normal: {
                            color: 'blue',           // 阳线填充颜色
                            lineStyle: {
                                width: 3,
                                color: 'blue',    // 阳线边框颜色
                            }
                        },
                        emphasis: {
                            color: 'blue',         // 阳线填充颜色
                        }
                    }
                },
                [2242.26, 2210.9, 2205.07, 2250.63],
                [2264.43, 2242.11, 2240.07, 2266.69],
                [2270.71, 2270.93, 2260.87, 2276.86],
                [2297.1, 2272.42, 2264.76, 2297.1],
                [2300.21, 2299.25, 2294.11, 2313.43],
                [2320.74, 2300.59, 2299.37, 2325.53],
                [2316.25, 2317.75, 2310.49, 2325.72],
                [2323.54, 2324.02, 2321.17, 2334.33],
                [2293.4, 2321.32, 2281.47, 2322.1],
                [2286.66, 2293.08, 2283.94, 2301.7],
                [2281.45, 2288.53, 2270.25, 2292.59],
                [2293.81, 2275.67, 2274.1, 2304.95],
                [2303.75, 2302.4, 2292.43, 2314.18],
                [2297.11, 2305.11, 2290.12, 2305.3],
                [2286.33, 2299.99, 2281.9, 2309.39],
                [2249.81, 2282.87, 2248.41, 2288.09],
                [2221.34, 2251.81, 2210.77, 2252.87],
                [2217.09, 2224.8, 2213.58, 2225.19],
                [2238.9, 2217.01, 2205.87, 2239.93],
                [2247.68, 2241.92, 2231.36, 2250.85],
                [2228.82, 2246.83, 2225.81, 2247.67],
                [2246.96, 2232.97, 2221.38, 2247.86],
                [2242.39, 2246.3, 2235.42, 2255.21],
                [2227.86, 2235.57, 2219.44, 2240.26],
                [2212.5, 2231.17, 2212.5, 2236.07],
                [2179.05, 2205.5, 2179.05, 2222.81],
                [2170.78, 2174.12, 2161.14, 2179.65],
                [2203.89, 2177.91, 2173.86, 2210.58],
                [2213.19, 2199.31, 2191.85, 2224.63],
                [2187.35, 2218.32, 2184.11, 2226.12],
                [2242.62, 2184.54, 2182.81, 2242.62],
                [2236.4, 2242.17, 2232.26, 2245.12],
                [2201.12, 2244.64, 2200.58, 2250.11],
                [2181.82, 2197.6, 2175.44, 2206.03],
                [2195.03, 2193.8, 2178.47, 2197.51],
                [2169.63, 2194.85, 2165.78, 2196.43],
                [2199.91, 2181.94, 2177.39, 2204.99],
                [2218.09, 2206.78, 2204.44, 2226.26],
                [2236.98, 2219.55, 2217.26, 2242.48],
                [2224.93, 2226.13, 2212.56, 2233.04],
                [2215.47, 2225.77, 2215.47, 2234.73],
                [2196.24, 2211.59, 2180.67, 2212.59],
                [2232.69, 2225.29, 2217.25, 2241.34],
                [2234.9, 2227.74, 2220.44, 2253.42],
                [2229.46, 2234.4, 2227.31, 2243.95],
                [2238.49, 2236.62, 2228.81, 2246.87],
                [2273.55, 2236.3, 2232.91, 2273.55],
                [2299.38, 2301.26, 2289, 2323.48],
                [2318.58, 2297.67, 2281.12, 2319.99],
                [2334.74, 2326.72, 2319.91, 2344.89],
                [2321.4, 2328.28, 2314.97, 2332],
                [2318.21, 2324.24, 2311.6, 2330.81],
                [2257.74, 2317.37, 2257.42, 2317.86],
                [2244.26, 2257.43, 2232.02, 2261.31],
                [2267.29, 2240.02, 2239.21, 2276.05],
                [2269.31, 2278.4, 2250, 2312.08],
                [2255.77, 2270.28, 2253.31, 2276.22],
                [2282.17, 2263.97, 2253.25, 2286.33],
                [2309.16, 2286.6, 2264.83, 2333.29],
                [2314.68, 2310.59, 2296.58, 2320.96],
                [2326.42, 2318.61, 2314.59, 2333.67],
                [2340.44, 2324.29, 2304.27, 2352.02],
                [2333.61, 2347.18, 2321.6, 2351.44],
                [2274.81, 2326.31, 2270.1, 2328.14],
                [2332.08, 2273.4, 2259.25, 2333.54],
                [2364.54, 2359.51, 2330.86, 2369.65],
                [2322.32, 2365.59, 2308.92, 2366.16],
                [2297.77, 2313.22, 2292.03, 2324.63],
                [2313.74, 2293.34, 2289.89, 2340.71],
                [2320.62, 2325.82, 2315.01, 2338.78],
                [2322.94, 2314.16, 2308.76, 2330.88],
                [2378.82, 2325.95, 2309.17, 2378.82],
                [2383.49, 2397.18, 2370.61, 2397.94],
                [2420.26, 2382.91, 2373.53, 2427.07],
                [2441.91, 2421.56, 2415.43, 2444.8],
                [2416.62, 2432.4, 2414.4, 2443.03],
                [2430.69, 2418.53, 2394.22, 2433.89],
                [2432.68, 2434.48, 2427.7, 2441.73],
                [2411, 2433.13, 2403.3, 2437.42],
                [2425.92, 2428.15, 2417.58, 2440.38],
                [2377.41, 2419.02, 2369.57, 2421.15],
                [2383.43, 2385.42, 2371.23, 2391.82],
                [2360.75, 2382.48, 2347.89, 2383.76],
                [2347.22, 2358.98, 2337.35, 2363.8],
                [2295.35, 2346.5, 2295.35, 2346.92],
                [2300, 2291.3, 2288.26, 2308.38],
                [2320.26, 2302.6, 2287.3, 2362.94]
            ]
        },
        {
            name:'成交金额(万)',
            type:'line',
            yAxisIndex: 1,
            symbol: 'none',
            data:[
                7971452.5, 8105835, 7526158.5, 7114268,
                9237718, 9164861, 10070399, 10354677, 11431155,
                12035250, 9992016, 9202153, 11105205, 11529046,
                11302521, 12884353, 11124881, 10225527, 6665826.5, 
                7566047, 7919148, 8128014, 9116529, 8139084.5, 
                7904092, 8162560.5, 7831570, 5987761, 6525151, 
                8448324, 7897721, 8221751.5, 8224500, 9538301, 
                6188812.5, 5998655.5, 6695584.5, 5816217.5, 5619688, 
                6213270, 7109021.5, 7313504, 7366616.5, 6880135.5, 
                7759666.5, 6699753.5, 7335819, 10759351, 8570842, 
                9181132, 8541862, 8595132, 10478607, 11397426, 
                7551207, 8148617.5, 10157810, 6921859, 7768895.5, 
                10063709, 7391994.5, 8843860, 12608589, 12536480, 
                11672120, 14304651, 11153111, 11591827, 8826293, 
                10591719, 7764234, 8757982, 12662783, 9722230, 
                10633095, 10365702, 9896523, 10933507, 10458354, 
                12709611, 15253370, 12555496, 11620504, 12485603, 
                12491697, 11691637, 8026738.5, 13560434
            ]
        }
    ]
};
                    </textarea>
              </div><!--/.well -->
            </div><!--/span-->
            <div id="graphic" class="span8">
                <div id="main" class="main"></div>
                <div>
                    <button onclick="refresh(true)">Refresh ~</button>
                    <span id='wrong-message' style="color:red"></span>
                </div>
            </div><!--/span-->
        </div><!--/row-->
        <hr>
        <!-- FOOTER -->
        <footer>
          <p class="pull-right"><a href="#">Back to top</a></p>
          <p>&copy; 2013 ECOM-FE &middot; <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">Terms</a> &middot; <a href="../changelog.html" target="_blank">Changelog</a></p>
        </footer>
    </div><!--/.fluid-container-->

    <script src="../asset/js/jquery.js"></script>
    <script src="../asset/js/bootstrap-transition.js"></script>
    <script src="../asset/js/bootstrap-alert.js"></script>
    <script src="../asset/js/bootstrap-modal.js"></script>
    <script src="../asset/js/bootstrap-dropdown.js"></script>
    <script src="../asset/js/bootstrap-scrollspy.js"></script>
    <script src="../asset/js/bootstrap-tab.js"></script>
    <script src="../asset/js/bootstrap-tooltip.js"></script>
    <script src="../asset/js/bootstrap-popover.js"></script>
    <script src="../asset/js/bootstrap-button.js"></script>
    <script src="../asset/js/bootstrap-collapse.js"></script>
    <script src="../asset/js/bootstrap-carousel.js"></script>
    <script src="../asset/js/bootstrap-typeahead.js"></script>
    <script src="../asset/js/echartsExample.js"></script>
</body>
</html>